<!DOCTYPE html>
<html>
<!-- 背景颜色 -->
<style>
	p.gray{background-color: gray;}
	h1{background-color: transparent;}
	h2{background-color: rgb(250,0,250);}
	h3{background-color: #00ff00}
</style>

<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>

<!-- 图片做背景 -->
<style>
	div#test{
		background-image: url(background.jpg);
		width: 200px;
		height: 100px;
	}
</style>

<div id="test">这是一个有背景图的DIV</div>

<!-- background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复 -->
<style>
div#norepeat
  {
    background-image:url(background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: no-repeat;
  }
div#repeat-x
  {
    background-image:url(background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: repeat-x;
  }
</style>
 
<div id="norepeat">背景不重复</div>
<div id="repeat-x"> 背景水平重复</div>

<!-- 背景平铺 -->
<!-- 属性：background-size
值：contain -->
<style>
	#contain{
		background-image: url(background_small.jpg);
		width: 200px;
		height: 100px;
		background-size: contain;
	}
</style>

<div id="contain">
	背景平铺，通过拉伸实现，会有失真
</div>

</html>